{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import button %}

{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@gritter_css'
    '@chosen_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
    <style>
        .options_text{
            font-size: 18px;
            margin-top: 10px;
            text-align: center;
        }
    </style>
{% endblock %}

{% block content %}
    <h3 class="header smaller lighter green">告警配置:</h3>

    <form class="form-horizontal form-group col-xs-12 col-sm-12" method="post" action="{{ path('icsoc_monitor_alarm_set') }}?id={{ id }}">

        <div class="form-group col-xs-12 col-sm-12 options_text">
            <div class="col-xs-2 col-sm-2 align-right">
                <span>告警任务：</span>
            </div>
            <input class="col-xs-2 col-sm-2 alarm_name" name="alarm_name" placeholder="任务名称" type="text" style="margin-left: 12px" required="required" value="{{ result['alarm_name'] }}">
        </div>

        <div class="form-group col-xs-12 col-sm-12 options_text">
            <div class="col-xs-2 col-sm-2 align-right">
                <span>告警技能组：</span>
            </div>
            <div class="col-xs-2 col-sm-2">
                <select data-placeholder="默认为全部技能组" name="que_config[]" class="chosen-select tag-input-style" id="queues" style="width: 410px" multiple>
                    {% for key,val in queues %}
                        <option value="{{ key }}" {% for ky,vl in result['que_config'] %}{% if vl == key %}selected="selected"{% endif %}{% endfor %}>{{ val }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="form-group col-xs-12 col-sm-12 options_text">
            <div class="col-xs-2 col-sm-2 align-right">
                <span>告警阀值：</span>
            </div>
        </div>
        <div class="form-group col-xs-12 col-sm-12 alarmValue">
            <div class="col-xs-2 col-sm-2"></div>
            <div class="col-xs-2 col-sm-2">
                <select class="form-control my_option text-center" name="name[]" required="required">
                    <option value="">请选择</option>
                    <option value="que_num">排队</option>
                    <option value="ring_num">振铃</option>
                    <option value="call_num">通话</option>
                    <option value="ready_num">整理</option>
                    <option value="arrange_num">就绪</option>
                    <option value="busy_num">置忙</option>
                </select>
            </div>
            <div class="col-xs-2 col-sm-2">
                <select class="form-control the_compare text-center" name="compare[]">
                    <option value=">">大于</option>
                    <option value="<">小于</option>
                </select>
            </div>
            <div class="col-xs-2 col-sm-2">
                <input class="spinbox-input form-control text-center the_number" name="number[]" type="number" min="0" required="required">
            </div>
            <div class="col-xs-2 col-sm-2">
                <button type="button" class="btn btn-sm btn-success" onclick="addOneLine()">
                    <i class="icon-only  ace-icon ace-icon fa fa-plus bigger-110"></i>
                </button>
            </div>
        </div>

        <div class="form-group col-xs-12 col-sm-12 options_text">
            <div class="col-xs-2 col-sm-2 align-right">
                <span>告警频率：</span>
            </div>
            <div class="col-xs-1 col-sm-1">
                <input class="spinbox-input form-control text-center" name="alarm_time" id="alarm_time" type="number" min="0" required="required">
            </div>
            <div class="col-xs-1 col-sm-1 align-left">
                分钟
            </div>
        </div>

        <div class="form-group col-xs-12 col-sm-12 options_text">
            <div class="col-xs-2 col-sm-2 align-right">
                <span>告警方式：</span>
            </div>
        </div>
        <div class="form-group col-xs-12 col-sm-12">
            <div class="col-xs-2 col-sm-2"></div>
            <div class="col-xs-2 col-sm-2">
                <select class="form-control alarm_type text-center" name="alarm_type" required="required">
                    <option value="1" {% if result['alarm_type'] == 1 %}selected = "selected"{% endif %}>短信</option>
                </select>
            </div>
            <div class="col-xs-2 col-sm-2">
                <label class="col-xs-10 col-sm-10 control-label no-padding-right text-right" for="form-field-1">手机号码：</label>
            </div>
            <div class="col-xs-3 col-sm-3">
                <textarea required="required" class="col-xs-12 col-sm-12 valid phone" name="alarm_value" placeholder="每行一个号码" aria-required="true" aria-invalid="false"></textarea>
            </div>
        </div>

        <div class="clearfix form-actions form-group col-xs-12 col-sm-12">
            <div class="col-md-offset-4 col-md-8">
                <button class="btn btn-info" type="submit" id="but_sub">
                    <i class="ace-icon fa fa-check bigger-110"></i>
                    提交
                </button>
                &nbsp; &nbsp; &nbsp;
                <button class="btn" type="reset" id="reset">
                    <i class="ace-icon fa fa-undo bigger-110"></i>
                    重 置
                </button>
            </div>
        </div>
    </form>

    <div class="form-group col-xs-12 col-sm-12 hide" id="clone">
        <div class="col-xs-2 col-sm-2"></div>
        <div class="col-xs-2 col-sm-2">
            <select class="form-control my_option text-center" name="name[]" required="required">
                <option value="">请选择</option>
                <option value="que_num">排队</option>
                <option value="ring_num">振铃</option>
                <option value="call_num">通话</option>
                <option value="ready_num">整理</option>
                <option value="arrange_num">就绪</option>
                <option value="busy_num">置忙</option>
            </select>
        </div>
        <div class="col-xs-2 col-sm-2">
            <select class="form-control the_compare text-center" name="compare[]" id="form-field-select-1">
                <option value=">">大于</option>
                <option value="<">小于</option>
            </select>
        </div>
        <div class="col-xs-2 col-sm-2">
            <input class="spinbox-input form-control text-center the_number" name="number[]" type="number" min="0" required="required">
        </div>
        <div class="col-xs-2 col-sm-2">
            <button type="button" class="btn btn-sm btn-danger" onclick="delOneLine(this)">
                <i class="icon-only  ace-icon ace-icon fa fa-minus bigger-110"></i>
            </button>
        </div>
    </div>
{% endblock %}

{% block footer %}
    {% javascripts
    '@datepicker_js'
    '@chosen_js'
    '@gritter_js'
    '@common_js'
    '@bootbox_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        var optionArr = [];
        optionArr['que_num'] = "排队";
        optionArr['ring_num'] = "振铃";
        optionArr['call_num'] = "通话";
        optionArr['ready_num'] = "整理";
        optionArr['arrange_num'] = "就绪";
        optionArr['busy_num'] = "置忙";

        $(function () {
            $('.chosen-select').chosen();
            //默认值
            {% if result['alarm_value'] %}
                $('.phone').val('{{ result['alarm_value'] }}');
            {% endif %}

            {% if result['list'] is not empty %}
                {% for key,val in result['list'] %}
                    $('.my_option').eq({{ key }}).find('option[value="{{ val.name }}"]').attr('selected', 'selected');
                    $('.the_compare').eq({{ key }}).find('option[value="{% if val.compare == '>' %}>{% else %}<{% endif %}"]').attr('selected', 'selected');
                    $('.the_number').eq({{ key }}).val({{ val.number }});
                    {% if key != result['list_num'] %}
                        addOneLine();
                    {% endif %}
                {% endfor %}
            {% endif %}

            {% if result['alarm_time'] is not empty %}
                $('#alarm_time').val({{ result['alarm_time'] }});
            {% endif %}

            $("input[name='alarm']").click(function() {
                updateCheckAValue($(this).val());
            });

            //提交
            $("form").submit( function () {
                /*var alarm_name = $('.alarm_name').val();
                var que_config = $('#queues').val() || [];
                var alarm_type = $('.alarm_type').val();*/
                var phone = $('.phone').val();
                var alarm_value = new Array();
                alarm_value = phone.split("\n");
                var isUndifind = true;
                for (var i=0; i<alarm_value.length; i++) {
                    if (alarm_value[i] != '') {
                        isUndifind = false;
                        if(!(/^1(3|4|5|7|8)\d{9}$/.test(alarm_value[i]))){
                            gritterAlert('{{ 'Prompt'|trans }}', '手机号码有误', 'error');
                            return false;
                        }
                    }
                }
                if (isUndifind) {
                    gritterAlert('{{ 'Prompt'|trans }}', '请输入手机号', 'error');
                    return false;
                }

                /*var name = new Array();
                var compare = new Array();
                var number = new Array();
                $('.alarmValue').each(function(){
                    var key = $(this).find('.my_option').val();
                    name.push(key);
                    compare.push($(this).find('.the_compare').val());
                    number.push($(this).find('.the_number').val());
                });*/
                /*$.ajax({
                    url:"{{ path('icsoc_monitor_alarm_set') }}",
                    dataType:"json",
                    data:{'alarm_name':alarm_name, 'que_config':que_config,'name':name, 'compare':compare, 'number':number, 'alarm_value':alarm_value, 'alarm_type':alarm_type, 'id':{{ id }}},
                    type:'post',
                    success:function(e){
                        if(e.code == 200) {
                            gritterAlert('{{ 'Prompt'|trans }}', e.success, 'success');
                            javascript:history.go(-1);
                        } else {
                            gritterAlert('{{ 'Prompt'|trans }}', e.message, 'error');
                        }
                    }
                });
                return false;*/
            } );

            //重置
            $('#reset').click(function () {
                $('.my_option').html('');
            })
        });

        //获取复选框的值
        function getVal(){
            var chk_value =[];//定义一个数组
            $('input[name="alarm"]:checked').each(function(){//遍历每一个名字为nodes的复选框，其中选中的执行函数
                chk_value.push($(this).val());//将选中的值添加到数组chk_value中
            });
            return chk_value;
        }
        //处理下拉框
        function updateCheckAValue(the){
            $('.my_option').each(function (i) {
                var theSelect = $(this);
                if (theSelect.find('option[value="'+the+'"]').length == 0) {
                    theSelect.append("<option value='"+the+"'>"+optionArr[the]+"</option>");
                } else {
                    if (theSelect.find('option[value="'+the+'"]').attr('selected')) {
                        $('.the_number').eq(i).val('');
                        $('.the_compare').eq(i).find('option[value=">"]').attr('selected', 'selected');
                    }
                    theSelect.find('option[value="'+the+'"]').remove();
                }
            });
        }

        //添加一行配置
        function addOneLine() {
            var clone = $('#clone').clone();
            clone.addClass('alarmValue').removeClass('hide').attr('id', '');
            $('.alarmValue').last().after(clone);
        }
        //删除一行配置
        function delOneLine(theThis) {
            $(theThis).parents('.alarmValue').remove();
        }
    </script>
{% endblock %}